<template>
  <div id="viewDiv">
    <div id="mapViewDiv">
      <button type="button" id="back" class="btn btn-primary" @click="back">返回</button>
    </div>
  </div>
</template>

<script>
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import esriConfig from '@arcgis/core/config'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer.js'
import SimpleRenderer from '@arcgis/core/renderers/SimpleRenderer.js'
import PictureMarkerSymbol from '@arcgis/core/symbols/PictureMarkerSymbol.js'
import PopupTemplate from '@arcgis/core/PopupTemplate.js'
export default {
  data() {
    return {
      mapview: null,
      VoluntaryGraphics: null
    }
  },
  methods: {
    back() {
      this.$router.push('../')
    }
  },
  created() {
    esriConfig.apiKey = 'AAPKdb651e14b8204bd5abf0ffc20363a94cse0GEQoKoCaYa5ZlJ3v5TZi9LNz0OIL66WTsqHrzPTls3Zeq4rLC08zbB-qakYx4'
    const map = new Map({
      basemap: 'osm-streets'
    })
    const VoluntaryActivityPointSymbol = new PictureMarkerSymbol({
      url: 'https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png',
      width: '26px',
      height: '26px'
    })
    const VoluntaryActivityPointRenderer = new SimpleRenderer({
      symbol: VoluntaryActivityPointSymbol
    })
    const voluntaryActivityPopupTemplate = new PopupTemplate({
      title: '志愿活动详情',
      content: () => {
        return `
        <div class="esri-feature__fields esri-feature__content-element">
        <table class="esri-widget__table" summary="属性和值列表">
          <tbody>
            <tr>
              <th class="esri-feature__field-header">志愿名称</th>
              <td class="esri-feature__field-data">{VoluntaryName}</td>
            </tr>
          </tbody>
        </table>
      </div>
        `
      }
    })
    const layer = new FeatureLayer({
      // URL to the service
      url: 'https://services8.arcgis.com/CmXfu09loK81if9H/arcgis/rest/services/VoluntaryActivityPoint/FeatureServer/0',
      outFields: ['VoluntaryName', 'VoluntaryActivityID'],
      renderer: VoluntaryActivityPointRenderer,
      popupTemplate: voluntaryActivityPopupTemplate
    })
    map.add(layer)
    const mapview = new MapView({
      map,
      center: [116.8, 36.55],
      zoom: 5
    })
    let component = this
    mapview.whenLayerView(layer).then(layerView => {      
      let watchObj= layerView.watch('updating', value => {
        if (!value) {
          layerView
            .queryFeatures({
              geometry: mapview.extent,
              returnGeometry: true,
              orderByFields: ['OBJECTID']
            })
            .then(results => {              
              for (let i = 0; i < results.features.length; i++) {
                let result = results.features[i]
                if (result.attributes.VoluntaryActivityID.search(component.$route.params.id) !== -1) {
                  this.mapview
                    .goTo({
                      center: result.geometry
                    })
                    .then(() => {
                      this.mapview.popup.open({
                        features: [result],
                        location: result.geometry.centroid
                      })
                      watchObj.remove()
                    })                  
                }
              }              
            })
        }
      })      
    })
    this.mapview = mapview
  },
  mounted() {
    this.mapview.container = 'mapViewDiv'
    this.mapview.ui.add('back', 'top-left')    
  }
}
</script>

<style lang="less" scoped>
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
#mapViewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
</style>
